/**************************************
* VLOOK CSS 字体主题、圆角样式
*
* V13-dev
* 2021-10-30
*
* 配合 base.less 进行使用
*
***************************************/

@fontSize: 1em; // 16px
@fontSizeBigger: 1.125em; // 18px

// Rangs of font-weight:
//   100 - Thin
//   200 - Extra Light (Ultra Light)
//   300 - Light
//   400 - Regular (Normal、Book、Roman)
//   500 - Medium
//   600 - Semi Bold (Demi Bold)
//   700 - Bold
//   800 - Extra Bold (Ultra Bold)
//   900 - Black (Heavy)

@font-face {
    font-family: "color-emoji";
    src: local("Apple Color Emoji"),
         local("Segoe UI Emoji"),
         local("Segoe UI Symbol"),
         local("Noto Color Emoji");
    // 适用的编码范围
    unicode-range: U+1F000-1FAFF, U+2139-3299;
    // 参考链接：
    // https://unicode-table.com/cn/blocks/mahjong-tiles/
    // ...
    // https://unicode-table.com/cn/blocks/miscellaneous-technical/
}

// =========================================
// 基础字体信息
// -----------------------------------------
// Emoji / symbol 等符号字体
@emoji: "color-emoji";
// 基础等宽字体
@base_mono: Courier, "Courier New";
// 数值字体
@number_font: "VLOOK Number", "Altinn-DIN", "Bebas Neue", "DIN";
// 基础非衬线字体
@base_sans_en: "Helvetica Neue", Helvetica, Arial, Tahoma;
@base_sans_cn: "PingFang SC", "PingFang TC", "PingFang HK", SimHei, "黑体";
@base_mono_sans_en: "VLOOK Sans Mono", "Noto Sans Mono", Iosevka, "SF Mono", Menlo, "Cascadia Mono", Consolas, @base_mono;
// 基础衬线字体
@base_serif_en: "Times New Roman", Times;
@base_serif_cn: "Songti SC", STZhongsong, "华文中宋", SimSun, "宋体";
@base_mono_serif_en: "VLOOK Serif Mono", "Luxi Mono", "Iosevka Slab", "PT Mono", @base_mono, @base_mono_sans_en;
// 字体主题集
@base_noto_sans_sets: "Noto Sans CJK SC", "Noto Sans CJK HK", "Noto Sans CJK TW";
@base_noto_serif_sets: "Noto Serif CJK SC", "Noto Serif CJK HK", "Noto Serif CJK TW";
@base_source_sans_sets: "思源黑体", "Source Han Sans SC", "Source Han Sans CN", "Source Han Sans HK", "Source Han Sans HC", "Source Han Sans TW", "Source Han Sans TC";
@base_source_serif_sets: "思源宋体", "Source Han Serif SC", "Source Han Serif CN", "Source Han Serif HK", "Source Han Serif HC", "Source Han Serif TW", "Source Han Serif TC";

//=========================================
// 非衬线风格字体信息
// ----------------------------------------
// Microsoft YaHei 微软雅黑
@msyh: "Microsoft YaHei", "微软雅黑", @base_sans_cn, sans-serif;
@msyh_mono: "Microsoft YaHei", "微软雅黑", @base_sans_cn, monospace;
// ----------------------------------------
// Microsoft JhengHei 微軟正黑體
@msjh: "Microsoft JhengHei", "微軟正黑體", @base_sans_cn, sans-serif;
@msjh_mono: "Microsoft JhengHei", "微軟正黑體", @base_sans_cn, monospace;
// ----------------------------------------
// 思源黑体
@noto: "VLOOK Sans", @base_noto_sans_sets, @base_source_sans_sets, -apple-system, Roboto, @msyh, @msjh;
@noto_mono: @base_mono_sans_en, "VLOOK Sans", @base_noto_sans_sets, @base_source_sans_sets, -apple-system, Roboto, @msyh_mono, @msjh_mono;
@noto_fw_bold: 900;
@noto_fw_text: normal;
// ---
@sansFont: @noto;
@monoSansFont: @noto_mono;
@fontBoldWeight4Sans: @noto_fw_bold;
@fontBoldWeightText4Sans: @noto_fw_text;

//=========================================
// 衬线混搭风格字体信息
// ----------------------------------------
// 思源宋体＋黑体
@cross_noto_serif: "VLOOK Serif", @base_noto_serif_sets, @base_source_serif_sets, @base_serif_en, @base_serif_cn, serif;
@cross_noto_bold: "VLOOK Sans", @base_noto_sans_sets, @base_source_sans_sets, @base_sans_en, @base_sans_cn, sans-serif;
@cross_noto_title: @cross_noto_serif;
@cross_noto_header: @cross_noto_serif;
@cross_noto_mono: @base_mono_serif_en, "VLOOK Serif", @base_noto_serif_sets, @base_source_serif_sets, @base_serif_en, @base_serif_cn, monospace;
@cross_noto_fw_bold: bold;
@cross_noto_fw_title: 900;
@cross_noto_fw_text: 500;
// ---
@serifFont: @cross_noto_serif;
@serifBoldFont: @cross_noto_bold;
@serifTitle: @cross_noto_title;
@serifHeader: @cross_noto_header;
@monoSerifFont: @cross_noto_mono;
@fontBoldWeight4Serif: @cross_noto_fw_bold;
@fontBoldWeight4Title: @cross_noto_fw_title;
@fontBoldWeightText4Serif: @cross_noto_fw_text;

//=========================================
// 不同字体风格配置集
:root {
    // ---
    // 非衬线风格 Sans
    --vlook-font-family-title-sans: @emoji, @sansFont;
    --vlook-font-family-subtitle-sans: @emoji, @sansFont;
    --vlook-font-family-header-sans: @emoji, @sansFont;
    --vlook-font-family-text-sans: @emoji, @sansFont;
    --vlook-font-family-bold-sans: @emoji, @sansFont;
    --vlook-font-family-number-sans: @emoji, @number_font, @base_mono_sans_en, @sansFont;
    --vlook-font-family-tag-sans: @emoji, @sansFont;
    --vlook-font-family-code-sans: @emoji, @monoSansFont;
    --vlook-font-weight-bold-sans: @fontBoldWeight4Sans;
    --vlook-font-weight-title-sans: @fontBoldWeight4Sans;
    --vlook-font-weight-text-sans: @fontBoldWeightText4Sans;

    // ---
    // 衬线+非衬线混排风格 Serif + Sans
    --vlook-font-family-title-serif: @emoji, @serifTitle;
    --vlook-font-family-subtitle-serif: @emoji, @serifBoldFont;
    --vlook-font-family-header-serif: @emoji, @serifHeader;
    --vlook-font-family-text-serif: @emoji, @serifFont;
    --vlook-font-family-bold-serif: @emoji, @serifBoldFont;
    --vlook-font-family-number-serif: @emoji, @number_font, @base_mono_sans_en, @sansFont;
    --vlook-font-family-tag-serif: @emoji, @serifBoldFont;
    --vlook-font-family-code-serif: @emoji, @monoSerifFont;
    --vlook-font-weight-bold-serif: @fontBoldWeight4Serif;
    --vlook-font-weight-title-serif: @fontBoldWeight4Title;
    --vlook-font-weight-text-serif: @fontBoldWeightText4Serif;
}
// ---
// 应用 Sans 风格
.applyFontStyle(@fontStyle) when (@fontStyle = sans)  {
    :root {
        --vlook-font-theme: sans; // 默认字体风格
        --vlook-font-family-title: var(--vlook-font-family-title-sans);
        --vlook-font-family-subtitle: var(--vlook-font-family-subtitle-sans);
        --vlook-font-family-header: var(--vlook-font-family-header-sans);
        --vlook-font-family-text: var(--vlook-font-family-text-sans);
        --vlook-font-family-bold: var(--vlook-font-family-bold-sans);
        --vlook-font-family-number: var(--vlook-font-family-number-sans);
        --vlook-font-family-tag: var(--vlook-font-family-tag-sans);
        --vlook-font-family-code: var(--vlook-font-family-code-sans);
        --vlook-font-weight-bold: var(--vlook-font-weight-bold-sans);
        --vlook-font-weight-title: var(--vlook-font-weight-title-sans);
        --vlook-font-weight-text: var(--vlook-font-weight-text-sans);
    }
}
// ---
// 应用 Serif 风格
.applyFontStyle(@fontStyle) when (@fontStyle = serif)  {
    :root {
        --vlook-font-theme: serif; // 默认字体风格
        --vlook-font-family-title: var(--vlook-font-family-title-serif);
        --vlook-font-family-subtitle: var(--vlook-font-family-subtitle-serif);
        --vlook-font-family-header: var(--vlook-font-family-header-serif);
        --vlook-font-family-text: var(--vlook-font-family-text-serif);
        --vlook-font-family-bold: var(--vlook-font-family-bold-serif);
        --vlook-font-family-number: var(--vlook-font-family-number-serif);
        --vlook-font-family-tag: var(--vlook-font-family-tag-serif);
        --vlook-font-family-code: var(--vlook-font-family-code-serif);
        --vlook-font-weight-bold: var(--vlook-font-weight-bold-serif);
        --vlook-font-weight-title: var(--vlook-font-weight-title-serif);
        --vlook-font-weight-text: var(--vlook-font-weight-text-serif);
    }
}

//=========================================
// 配套圆角风格集
:root {
    // ---
    // 小号圆角
    --vlook-base-radius-small: 8px; // 标准圆角
    --vlook-small-radius-small: 4px; // 标准圆角内的小圆角
    --vlook-table-radius-small: 6px; // 表格圆角
    --vlook-small-inner-radius-small: calc(var(--vlook-table-radius-small)- 2px); // 标准圆角内的小圆角
    --vlook-tag-radius-small: 0.3em; // 标签圆角
    // --vlook-tag-small-radius-small: 0.25em; // 标签小圆角
    --vlook-circle-radius-small: 50%; // 半距圆角

    // ---
    // 大号圆角
    --vlook-base-radius-big: 12px; // 标准圆角
    --vlook-small-radius-big: 6px; // 标准圆角内的小圆角
    --vlook-table-radius-big: 10px; // 表格圆角
    --vlook-small-inner-radius-big: calc(var(--vlook-table-radius-big)- 2px); // 标准圆角内的小圆角
    --vlook-tag-radius-big: 0.5em; // 标签圆角
    // --vlook-tag-small-radius-big: 0.25em; // 标签小圆角
    --vlook-circle-radius-big: 50%; // 半距圆角
}
// ---
// 应用大号圆角
.applyThemeRadius(@themeRadius) when (@themeRadius = big)  {
    :root {
        --vlook-base-radius: var(--vlook-base-radius-big); // 标准圆角
        --vlook-small-radius: var(--vlook-small-radius-big); // 标准圆角内的小圆角
        --vlook-table-radius: var(--vlook-table-radius-big); // 表格圆角
        --vlook-small-inner-radius:calc(var(--vlook-table-radius) - 2px); // 标准圆角内的小圆角
        --vlook-tag-radius: var(--vlook-tag-radius-big); // 标签圆角
        // --vlook-tag-small-radius: var(--vlook-tag-small-radius-big); // 标签小圆角
        --vlook-circle-radius: var(--vlook-circle-radius-big); // 半距圆角
    }
}
// ---
// 应用小号圆角
.applyThemeRadius(@themeRadius) when (@themeRadius = small)  {
    :root {
        --vlook-base-radius: var(--vlook-base-radius-small); // 标准圆角
        --vlook-small-radius: var(--vlook-small-radius-small); // 标准圆角内的小圆角
        --vlook-table-radius: var(--vlook-table-radius-small); // 表格圆角
        --vlook-small-inner-radius:calc(var(--vlook-table-radius) - 2px); // 标准圆角内的小圆角
        --vlook-tag-radius: var(--vlook-tag-radius-small); // 标签圆角
        // --vlook-tag-small-radius: var(--vlook-tag-small-radius-small); // 标签小圆角
        --vlook-circle-radius: var(--vlook-circle-radius-small); // 半距圆角
    }
}
// ---
// 应用无圆角
.applyThemeRadius(@themeRadius) when (@themeRadius = none)  {
    :root {
        --vlook-base-radius: 0; // 标准圆角
        --vlook-small-radius: 0; // 标准圆角内的小圆角
        --vlook-table-radius: 0; // 表格圆角
        --vlook-small-inner-radius: calc(var(--vlook-table-radius) - 2px); // 标准圆角内的小圆角
        --vlook-tag-radius: 0; // 标签圆角
        // --vlook-tag-small-radius: var(--vlook-tag-small-radius-small); // 标签小圆角
        --vlook-circle-radius: 0; // 半距圆角
    }
}